前言

當我們還是新手時，常常寫了一大堆程式碼，程式碼越來越亂，UI與邏輯瘋狂耦合，發生bug又找不到在哪，又發現好多地方都是差不多的功能，卻每個地方都寫不一樣，又不知道是哪個地方產生bug的，這時候我們就需要使用自己的custom hook，但是我們應該怎麼寫呢，這就是為什麼這篇主題產生的原因了。

使用custom Hook與寫測試的理由

代碼重用與模組化

當你發現自己在不同的React組件或專案中重複相同的邏輯時，使用Custom Hooks是一種很好的方式來重用這些邏輯。這讓你能夠抽取共用的功能，並在多個組件或專案間重用它。

減少冗餘和提升可維護性

使用Custom Hooks可以幫助你減少冗餘的代碼，使你的專案更簡潔。這將使未來的維護工作更容易，因為你只需在一個地方更新邏輯，而不必在多個地方做相同的更改。

狀態邏輯的封裝

Custom Hooks允許你將狀態邏輯封裝在一個獨立的單元中。這樣，你可以在不影響組件結構的情況下，更容易地為你的應用添加新功能或修改現有功能。

易於測試

將邏輯分離到Custom Hooks中使其更容易單獨進行測試。你可以專注於測試單一的Hook，而不是整個組件，這樣測試會更精確、更容易實施。

提升可讀性和可理解性

使用Custom Hooks有助於使你的組件代碼更加乾淨和組織良好。這將使其他開發人員（或未來的你）更容易理解和維護代碼。

提高開發速度

一旦你建立了一個可重用的Custom Hooks庫，你會發現開發新功能或新專案的速度會更快。這是因為你可以重用既有的邏輯，而不必每次都重新寫代碼。

更容易進行代碼審查

當你的代碼模組化和解耦時，代碼審查的過程也會更容易。這將使團隊更容易理解每個部分的作用，更快地找到潛在的錯誤或改進點。

提升團隊協作

擁有一個內部的、高度可重用的Hooks庫可以加快團隊開發速度，並確保各個組件和功能遵循相同的最佳實踐。

開始前須知：

1. 看這篇前需要對React有基礎了解
2. 本篇文章是使用React18，觀看本篇文章前可以先使用CRA或Vite等方法開啟一個react專案
3. 開啟專案後請先下載以下套件

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
"devDependencies": {
  "@testing-library/jest-dom": "^6.1.3",
  "@testing-library/react": "^14.0.0",
  "@types/jest": "^29.5.4",
  "jest": "^29.6.4",
	"jest-environment-jsdom": "^29.6.4",
  "jest-localstorage-mock": "^2.4.26",//之後在LocalStorage篇會用到，可先下載
  "microbundle": "^0.15.1",
  "ts-jest": "^29.1.1",
  "ts-node": "^10.9.1",
  "typescript": "^5.2.2"
}

4. 如果不會設定typescript的朋友，可以複製以下設定

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "ESNext",
    "target": "es5",
    "jsx": "react",
    "moduleResolution": "node",
    "esModuleInterop": true,
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ]
}

5. jest 的設定也可以參考以下

/** @type {import('ts-jest').JestConfigWithTsJest} */
// jest.config.ts
import type { Config } from '@jest/types';

const config: Config.InitialOptions = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  setupFiles: ["jest-localstorage-mock"], //之後在LocalStorage篇會用到，可先下載
  // 更多配置選項
};

export default config;

謝謝大家，這三十天我們就一起努力吧～💪